<template>
    <div class="facility">
        <div class="title">选择鱼塘</div>
        <!-- 树状列表组件 -->
        <div style="width: 100%; height: calc(100% - 95px); overflow: auto;position: relative;">
            <!-- <el-tree ref="catetreeone" :data="treedata" :expand-on-click-node="false" node-key="facilityId"
            :default-expanded-keys="treeList" accordion :highlight-current="true" :props="treePropstype"
            :style="treeList.length === 0 ? 'padding-top:20px' : ''" @node-click="(e) => { handleSelectionChange(e) }">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <i :class="node.level == 1 ? 'icon el-icon-folder-opened' : 'icon el-icon-document'"></i>
                <span class="label">{{ data.facilityName }}</span>
            </span>
        </el-tree> -->
            <div class="facilityTree" v-for="item, index in treedata" :key="index">
                <div class="facilityGroupName" :class="facilityGroupNo == item.facilityGroupNo ? 'activeFacility' : ''"
                    @click="handleSelectionChange(item)">
                    <div>{{ item.facilityName }}</div>
                    <div class="el-icon" @click.stop="caret(index)" title="展开/收起">
                        <i v-show="facilityGroupIndexList.includes(index)" class="el-icon-caret-bottom"></i>
                        <i v-show="!facilityGroupIndexList.includes(index)" class="el-icon-caret-top"></i>
                    </div>
                </div>
                <div class="facilityList" :style="{
                    height: facilityGroupIndexList.includes(index) ? `${item.facilityList.length * 36}px` : 0
                }">
                    <div class="facilityName" :class="facilityNo == item_c.facilityNo ? 'activeFacility' : ''"
                        @click="handleSelectionChange(item_c)" v-for="item_c, index_c in item.facilityList"
                        :key="index_c">
                        {{ item_c.facilityName }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import camera from '@/api/basicInformation/camera';
export default {
    data() {
        return {
            treePropstype: {
                children: 'facilityList',
                label: 'facilityName'
            },
            treedata: [],
            facilityGroupList: [],
            facilityList: [],
            treeList: [],
            facilityNo: '',
            facilityGroupNo: '',
            facilityGroupIndexList: [0]
        }
    },
    mounted() {
        this.gettreelist()
    },
    methods: {
        caret(index) {
            if (this.facilityGroupIndexList.includes(index)) {
                this.facilityGroupIndexList = this.facilityGroupIndexList.filter(e => e != index)
            } else {
                this.facilityGroupIndexList.push(index);
            }
        },
        handleSelectionChange(e) {
            this.facilityNo = e.facilityNo + '';
            this.facilityGroupNo = e.facilityGroupNo + '';
            console.log(this.facilityGroupNo, this.facilityNo);
            this.$emit("treeselectvalue", e);
        },
        // 获取树状数据
        async gettreelist() {
            camera.getshexiangdikaui().then(res => {
                let data = res.data
                this.facilityGroupList = data.facilityGroupList.map(item => {
                    return { ...item, isGroup: true };
                })
                this.facilityList = data.facilityList.filter(item => {
                    return item.breedType == sessionStorage.breedType
                })
                if (this.facilityGroupList.length > 0) {
                    this.treeList = [this.facilityGroupList[0].facilityGroupId]
                } else if (this.facilityList.length) {
                    this.treeList = [this.facilityList[0].facilityId]
                } else {
                    this.treeList = []
                }
                console.log(this.treeList)
                this.changetreedata()
            }).catch(err => {
                console.log(err)
            })

        },
        // 处理树状数据
        changetreedata() {
            let nothasgroup = []
            if (this.facilityList.length > 0) {
                nothasgroup = [{
                    isGroup: true,
                    facilityName: "未分组地块",
                    facilityId: this.facilityList[0].facilityId,
                    facilityList: this.facilityList
                }]
            } else {
                nothasgroup = [{
                    isGroup: true,
                    facilityName: "未分组地块",
                    facilityList: this.facilityList
                }]
            }
            let hasgrouplist = this.facilityGroupList.filter(
                item => {
                    this.$set(item, 'facilityName', item.facilityGroupName)
                    this.$set(item, 'facilityId', item.facilityGroupId)
                    // console.log(item)
                    let groupitem = {
                        ...item
                    }
                    if (item.breedType == sessionStorage.breedType) {
                        return groupitem
                    } else {
                        return false;
                    }
                }
            )
            console.log(hasgrouplist, '-------------------------------')
            this.treedata = [
                ...hasgrouplist,
                ...nothasgroup
            ]
            console.log(this.treedata)
            this.$nextTick(() => {
                if (this.treedata.length > 0) {
                    this.handleSelectionChange(this.treedata[0].facilityList[0])
                } else {
                    this.handleSelectionChange(this.treedata[0])
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.facility {
    width: 100%;
    height: 100%;

    .title {
        text-align: center;
        padding: 20px 0;
        line-height: 25px;
        font-size: 14px;
        font-weight: bold;
        color: #00365D;
    }

    ::v-deep .el-tree {
        overflow-y: unset;
        padding-right: 8px;
    }

    ::v-deep .el-tree-node__content {
        font-size: 14px;
        height: 50px;
        border-bottom: 1px solid #f0f0f0;
    }

    .icon {
        padding-right: 10px
    }

    .facilityTree {
        width: 100%;
        font-size: 16px;
        text-align: center;
        line-height: 34px;
        padding: 0 20px;
        cursor: pointer;

        .facilityList {
            width: 100%;
            overflow: hidden;
            transition: all 0.3s;
            border-bottom: 1px solid #B8BCC3;
        }

        .facilityGroupName {
            background-color: #E5F2FF;
            transition: all 0.3s;
            position: relative;

            .el-icon {
                position: absolute;
                top: 50%;
                right: 5px;
                transform: translateY(-50%);
                color: #7E9AB5;
            }
        }

        .facilityName {
            background-color: #ffffff;
            transition: all 0.3s;
        }

        .facilityGroupName,
        .facilityName {
            height: 36px;
            border: 1px solid #B8BCC3;
            border-bottom: none;
            box-sizing: border-box;

            &:hover {
                background-color: #8199b2;
                color: #ffffff;

                .el-icon {
                    color: #ffffff;
                }
            }
        }

        .activeFacility {
            background-color: #4B8BC9;
            color: #ffffff;

            .el-icon {
                color: #ffffff;
            }
        }
    }
}
</style>